<template>
  <div class="login_container">
    <div class="login_box">
      <div class="avatar_box">
        <h2>房产管理系统</h2>
      </div>
      <!--添加表单-->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginRules"
        class="login_form"
        label-width="0px"
      >
        <el-form-item prop="name">
          <el-input
            v-model="loginForm.name"
            prefix-icon="el-icon-user"
			class="inputname"
			placeholder="请输入名字"
          ></el-input>
        </el-form-item>
        <el-form-item prop="num">
          <el-input
            v-model="loginForm.num"
            prefix-icon="el-icon-lock"
			class ="inputnum"
			placeholder="请输入电话号码"
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button class="login" @click="login" type="password">登录</el-button>
          <el-button class="reset" @click="resetLoginForm" type="info">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        name: "",
        num: "",
      },
      loginRules: {
        name: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
        ],
        num: [
          {
            required: true,
            message: "请输入电话",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (!valid) return;
        const { data: res } = await this.$http.post(
          "system/apis/login",
          this.loginForm
        );
        console.log(res);
        if (res.code == 3001) {
          this.$message.error("名字不能为空");
          return;
        }
        if (res.code == 3000) {
          this.$message.error("手机号必须为11位");
          return;
        }
        if (res.code == 3002) {
          this.$message.error("账号不存在，请先注册");
          return;
        }
		if (res.code == 3003) {
          this.$message.error("账号或者密码输入错误，请重新输入");
          return;
        }
        if (res.code == 200) {
          this.$message.success("登录成功");
          this.$router.push({ path:"/adminhome"});
          return;
        }
        this.$message.error("后台错误");
      });
    },
  },
};
</script>

 <style lang="less" scoped>
.login_container {
    background-color:rgb(16, 41, 29);
    height: 100%;
}
 .login_from {
   position: absolute;
   bottom: 0%;
   width: 100%;
   padding: 0 10px;
   box-sizing: border-box; // 设置边框
 }
 .login_box {
   width: 450px;
   height: 300px;
   background-color:darkolivegreen;
   border-radius: 3px; // 圆角
   position: absolute; // 绝对定位
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
 }
.btns {
  color: white;
  position: absolute;
  left:150px; 
  bottom: 30px;
}
.login{
	background-color: black;
	border-block-color: black;
}
.reset{
	background-color: rgb(22, 14, 8);
	border-block-color: rgb(22,14,8);
}
.inputname{
	width:80%;
	position: absolute;
	left:50px;
	top:25px;
}
.inputnum{
	width:80%;
	position: absolute;
	left:50px;
	top:50px;
}
</style>
